<script setup lang="ts">

import {useShopList} from '@/store/ShopList'

const getData = useShopList()

</script>

<template>
  <ul class="list">
    <li v-for="data in getData.DataList">
      <RouterLink :to="{
        name: 'detail',
        params: {
          id: data.goods_id
        }
      }">
        <el-card body-class="dataBody" style="max-width: 480px" body-style="padding: 0;">
          <template #header>
            <el-text style="min-height: 39px" line-clamp="2">
              {{ data.title }}
            </el-text>
          </template>
          <img class="data-img" :src="data.img_big_logo" alt=""/>
          <template #footer>
            <p>
              <span>￥{{ data.current_price }}</span>
            </p>
          </template>
        </el-card>
      </RouterLink>
    </li>
  </ul>
  <div class="pagination">
    <el-pagination
        :page-size="40"
        :page-count="20"
        layout="prev, pager, next"
        :total="1000"
    />
  </div>

</template>

<style scoped lang="scss">
.list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10px;
  padding-left: 10px;

  & > li {
    width: calc(100% / 4 - 10px);
  }

  .data-img {
    width: 100%;
    display: block;
  }

  .dataBody {
    padding: 0 !important;
  }

}

.pagination {
  display: flex;
  padding: 20px;
  justify-content: center;
}
</style>